<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>es6 class定义类结构</title>
  <!-- 
  在 JavaScript ES6 中，引入了  `class`  语法，使得定义类变得更加简洁和直观。
  1. 基本概念
  - 类（Class）：类是创建对象的蓝图，可以包含属性和方法。
  - 构造函数（Constructor）：特殊的方法，用于初始化类的实例。
  - 继承（Inheritance）：可以通过  `extends`  关键字实现类的继承。

  2. 定义类
  使用  `class`  关键字定义一个类，语法如下：
  class ClassName {
      // 构造函数
      constructor(parameters) {
          // 实例属性
      }

      // 类方法
      methodName() {
          // 方法体
      }
  }
  3. 示例代码
  以下是一个简单的例子，展示如何定义一个类：
  class Person {
      // 构造函数
      constructor(name, age) {
          this.name = name; // 实例属性
          this.age = age;   // 实例属性
      }

      // 类方法
      sayHello() {
          console.log(`Hello, my name is ${this.name}`);
      }

      sayAge() {
          console.log(`I am ${this.age} years old.`);
      }
  }

  // 创建实例
  const alice = new Person("Alice", 30);
  alice.sayHello(); // 输出: Hello, my name is Alice
  alice.sayAge();   // 输出: I am 30 years old.
  4. 继承
  使用  `extends`  关键字实现类的继承，子类可以继承父类的属性和方法。
  class Employee extends Person {
      constructor(name, age, job) {
          super(name, age); // 调用父类的构造函数
          this.job = job;   // 子类特有属性
      }

      // 子类方法
      sayJob() {
          console.log(`I work as a ${this.job}`);
      }
  }

  // 创建子类实例
  const bob = new Employee("Bob", 25, "Developer");
  bob.sayHello(); // 输出: Hello, my name is Bob
  bob.sayAge();   // 输出: I am 25 years old.
  bob.sayJob();   // 输出: I work as a Developer
  5. 静态方法
  使用  `static`  关键字定义静态方法，这些方法不能通过实例调用，只能通过类名调用。
  class MathUtil {
      static add(a, b) {
          return a + b;
      }
  }

  // 调用静态方法
  console.log(MathUtil.add(5, 3)); // 输出: 8
  6. 总结
  ES6 中的类（ `class` ）提供了一种更清晰、更简洁的方式来定义对象的结构和行为。通过构造函数、类方法、继承和静态方法，开发者可以更方便地实现面向对象编程的概念。
   -->
</head>
<body>

  <script>
    // ES5定义类
    // function Person(name, age) {
    //   this.name = name;
    //   this.age = age;
    // }
    // Person.prototype.sayHello = function() {
    //   console.log(`Hello, my name is ${this.name}`);
    // }
    // Person.prototype.sayAge = function() {
    //   console.log(`I am ${this.age} years old.`);
    // }
    // // 创建实例
    // const person = new Person("Alice", 30);
    // person.sayHello(); // 输出: Hello, my name is Alice
    // person.sayAge();   // 输出: I am 30 years old.

    // ES6定义类
    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      sayHello() {
        console.log(`Hello, my name is ${this.name}`);
      }
      sayAge() {
        console.log(`I am ${this.age} years old.`);
      }
    }

    // 创建实例
    const person = new Person("Alice", 30);
    person.sayHello(); // 输出: Hello, my name is Alice
    person.sayAge();   // 输出: I am 30 years old.

    // ES6定义静态方法
    class MathUtil {
      static add(a, b) {
        return a + b;
      }
    }
    console.log(MathUtil.add(2, 3)); // 输出: 5

    // 另外一种定义方法: 表达式写法(了解, 少用)
    var Student = class {}
    var stu1 = new Student()
    console.log(stu1)
    
  </script>
  
</body>
</html>